import { GroupProps } from '@react-three/fiber';
import React from 'react';
import * as THREE from 'three';

const matTreeLeaves = new THREE.MeshPhongMaterial({
  color: 0x458248,
  flatShading: true,
});

const Tree = (props: GroupProps) => {
  return (
    <group {...props}>
      <mesh castShadow receiveShadow>
        <boxGeometry args={[10, 20, 10]} />
        <meshBasicMaterial color={0x59332e} />
      </mesh>
      <mesh material={matTreeLeaves} castShadow receiveShadow position-y={20}>
        <cylinderGeometry args={[1, 12 * 3, 12 * 3, 4]} />
      </mesh>
      <mesh material={matTreeLeaves} castShadow receiveShadow position-y={40}>
        <cylinderGeometry args={[1, 9 * 3, 9 * 3, 4]} />
      </mesh>
      <mesh material={matTreeLeaves} castShadow receiveShadow position-y={55}>
        <cylinderGeometry args={[1, 6 * 3, 6 * 3, 4]} />
      </mesh>
    </group>
  );
};

export default Tree;
